import React from 'react'
import { dictionary } from '../../../utils/dictionary';
import { Form, Input, Select } from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;

class FormComponent extends React.Component {
    render() {
        const { form, values = {} } = this.props;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 }
        };

        return (
            <Form layout="horizontal">
                <FormItem label="角色名" {...formItemLayout}>
                    {
                        getFieldDecorator('roleName', {
                            /** 初始值 */
                            initialValue: values.roleName,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '用户名不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入角色" />
                        )
                    }
                </FormItem>
                <FormItem label="状态" {...formItemLayout}>
                    {
                        getFieldDecorator('state', {
                            /** 初始值 */
                            initialValue: values.state
                        })(
                            <Select>
                                {dictionary.commonState.map(m => (<Option value={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
            </Form>
        );
    }
}

export default Form.create({})(FormComponent);